<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果</title>
    <style>
        /* 你也可以在 ::before 和 ::after 两个伪元素中添加阴影效果 */
        #boxshadow {
            position: relative;
            -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
            box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
            padding: 10px;
            background: white;
        }

        /* Make the image fit the box */
        #boxshadow img {
            width: 100%;
            border: 1px solid #8a4419;
            border-style: inset;
        }

        #boxshadow::after {
            content: '';
            position: absolute;
            /* hide shadow behind image */
            z-index: -1;
            -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            width: 70%;
            /* one half of the remaining 30% */
            left: 15%;
            height: 100px;
            bottom: 0;
        }
    </style>
</head>

<body>

    <div id="boxshadow">
        <img src="images/rock600x400.jpg" alt="Norway" width="600" height="400">
    </div>

</body>

</html>